<template>
  <div class='container'>
    <el-card class="box-card">
    <Screen ref="ScreenRef" :current.sync="current" :isEid="isEid" :tableData1.sync="tableData1" :formInline1.sync="formInline1" :total1.sync="total1"></Screen>
    <!-- 标签页 -->
 <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane  label="全部" name="3"></el-tab-pane>
    <el-tab-pane :label="item.label" :name="item.value" v-for="(item) in chkType" :key="item.value"></el-tab-pane>

  </el-tabs>
    <!-- 数据条数 -->
      <el-alert
        :title="`数据一共 ${total1} 条`"
         :closable="false"
        type="info"
        show-icon>
      </el-alert>
<!-- 数据展示 -->
        <el-table
            :header-cell-style="{background:'#fafafa','border-bottom':'2px solid #e8e8e8'}"
            :data="tableData1"
            style="width: 100%">
            <el-table-column width="120" prop="number" label="试题编号" ></el-table-column>
            <el-table-column width="120" prop="subject" label="学科" ></el-table-column>
            <el-table-column width="120" prop="catalog" label="目录"> </el-table-column>
            <el-table-column width="120" prop="choicenessType" label="题型">
              <template slot-scope="scope">
                {{scope.row.questionType | questionType}}
              </template>
            </el-table-column>
            <el-table-column width="280" prop="choiceness" label="题干">
              <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column width="180" prop="addDate" label="录入时间">
              <template slot-scope="scope">
              {{scope.row.addDate| addDate}}
              </template>
            </el-table-column>
            <el-table-column width="80"  prop="difficulty" label="难度">
              <template slot-scope="scope">
              {{scope.row.difficulty|difficulty}}
              </template>
            </el-table-column>
            <el-table-column  width="120" prop="creator" label="录入人"> </el-table-column>
            <el-table-column  width="120" prop="chkState" label="审核状态">
              <template slot-scope="scope">
                {{scope.row.chkState | chkState}}
              </template>
            </el-table-column>
            <el-table-column  width="150" prop="chkRemarks" label="审核意见"> </el-table-column>
            <el-table-column  width="120" prop="chkUser" label="审核人"> </el-table-column>
            <el-table-column  width="150" prop="publishState" label="发布状态">
              <template slot-scope="scope">
                  {{scope.row | publishState}}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                  <template slot-scope="scope">
                  <el-link :underline="false" type="primary"  @click="previewBtn(scope.row)" >预览</el-link>
                  <!-- 审核 -->
                  <el-link v-if="scope.row.chkState!=0" :disabled="scope.row.chkState!=0" :underline="false"  @click="checkBtn(scope.row.id)">审核</el-link>
                  <el-link v-else  :underline="false" type="primary" @click="checkBtn(scope.row.id)">审核</el-link>
                  <!-- 修改 -->
                  <el-link v-if="scope.row.publishState!=0" :disabled="scope.row.publishState!=0"  :underline="false"   @click="$router.push({path:'new',query:{id:scope.row.id,isEdit:1}})" >修改</el-link>
                  <el-link v-else :disabled="scope.row.publishState!=0"  :underline="false" type="primary"  @click="$router.push({path:'new',query:{id:scope.row.id,isEdit:1}})" >修改</el-link>
                  <!-- 下架 上架 -->
                  <el-link @click="putawaySold(scope.row)" :underline="false" type="primary">{{scope.row.publishState==0?'上架':'下架'}}</el-link>
                  <el-link v-if="scope.row.publishState!=0" :disabled="scope.row.publishState!=0" :underline="false" @click="delBtn(scope.row.id,2)" >删除</el-link>
                  <el-link v-else :disabled="scope.row.publishState!=0" :underline="false" @click="delBtn(scope.row.id,2)"  type="primary">删除</el-link>

                  </template>
            </el-table-column>

    </el-table>
    <!-- 分页按钮 -->
    <el-pagination
    style="margin-top:10px;float: right;margin-bottom:10px"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 50]"
      :current-page="current.page"
      :page-size='current.pagesize'
      layout=" sizes, prev, pager, next, jumper"
      :total="total1"
      >
    </el-pagination>
     <!-- 点击预览 -->
    <el-dialog v-if="dialogVisible" title="题目预览" :visible.sync="dialogVisible" width="55%" >
      <preview :questionDetails="questionDetails" :dialogVisible="dialogVisible"></preview>
      <div  class="dialog-footer" >
        <el-button  type="primary" @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 审核对话框 -->
    <el-dialog
    @closed="chkObj.chkRemarks=''"
      title="题目审核"
      :visible.sync="dialogChk"
      width="30%">
    <el-radio v-model="chkObj.chkState" :label="1">通过</el-radio>
    <el-radio v-model="chkObj.chkState" :label="2">拒绝</el-radio>
    <el-input
    class="chkinput"
      type="textarea"
      :rows="2"
      placeholder="请输入审核意见"
      v-model="chkObj.chkRemarks">
    </el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogChk = false">取 消</el-button>
    <el-button type="primary" @click="countersignBtn">确 定</el-button>
  </span>
</el-dialog>
    </el-card>
  </div>
</template>

<script>
import { chkType } from '../../api/hmmm/constants'
import preview from '../components/questions-preview.vue'
import Screen from '../../components/Screen/index.vue'
import { choice, detail, choiceAdd, choiceCheck, choicePublish } from '../../api/hmmm/questions'
export default {
  components: { Screen, preview },
  data () {
    return {
      activeName: 'first',
      // 数据列表展示
      tableData1: [],
      // 所有列表数据
      AlltableData1: [],
      current: {
        page: 1,
        pagesize: 5
      }, // 分页数据
      total1: 0, // 总数据条数
      dialogVisible: false, // 预览显示与隐藏
      questionDetails: {}, // 题库详情
      formInline1: {}, // 表单数据,
      chkType: chkType, // 审核状态
      /* 审核要传的数据 */
      chkObj: {
        chkState: 1, // 1 通过 2 不通过
        chkRemarks: ''// 原因
      },
      dialogChk: false, // 审核显示与隐藏
      id: '', // 要审核的题目的id
      chkStateList: {},
      isEid: true// 判断是精选题库还是基础题库

    }
  },
  created () {
    // 调用获取基础题库列表
    this.choicenessList()
  },
  // 监听dialogVisible
  watch: {
    dialogVisible: {
      handler (newval) {
        if (newval === false) {
          this.questionDetails = {}
        }
      }
    }
  },
  methods: {
    // 点击不同的标签页
    async handleClick (value) {
      this.chkStateList.chkState = value.name
      if (this.chkStateList.chkState === '3') {
        this.chkStateList = {}
      }
      // 切换标签页让page回到第一页
      this.current.page = 1
      const res = await choice({ ...this.current, ...this.chkStateList })
      // console.log(res)
      this.tableData1 = res.data.items
      this.total1 = res.data.counts
    },
    // 基础题库列表
    async  choicenessList () {
      // { ...this.current, ...this.formInline1 }
      // console.log(this.tableData1, 789)
      const res = await choice({ ...this.current, ...this.chkStateList })
      // const res1 = await choice({ page: 1, pagesize: res.data.counts }) // 拿到所有题库列表
      // this.AlltableData1 = res1.data.items
      // console.log(res.data.items, 789)
      this.tableData1 = res.data.items
      // console.log(this.tableData1)
      this.total1 = res.data.counts
    },
    // 每页几条
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.current.pagesize = val
      var flage = false
      for (const key in this.$refs.ScreenRef.formInline1) {
        if (this.$refs.ScreenRef.formInline1[key] !== '') {
          flage = true
          break
        }
      }
      if (!flage) {
        this.$refs.ScreenRef.formInline1 = {}
        this.formInline1 = this.$refs.ScreenRef.formInline1
      } else {
        this.formInline1 = this.$refs.ScreenRef.formInline1
      }
      // 调用获取基础题库列表
      this.choicenessList()
    },
    // 当前页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.current.page = val
      // 调用获取精选题库列表
      this.choicenessList()
    },
    // 点击预览
    async  previewBtn (row) {
      this.dialogVisible = true
      // console.log(row)
      const res = await detail(row)
      // console.log(res, 123)
      this.questionDetails = res.data
      // console.log(this.choicenessDetails)
    },
    // 点击删除按钮
    delBtn (id, index) {
      // console.log(id, index)
      this.$confirm('此操作将该题目移除精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await choiceAdd({ id, choiceState: index })
        // console.log(res)
        if (res.status !== 200) return this.$message.error('移除精选失败!')
        this.$message.success('移除精选成功!')
        // 如果删除第最后一页（例如4）的最一条数据之后，页面会显示不正常
        if (this.tableData1.length === 1) {
          // console.log(1111)
          this.current.page--
          if (this.current.page === 1) {
            this.current.page = 1
          }
        }
        // 调用获取基础题库列表
        this.choicenessList()
      }).catch(e => e)
    },
    // 点击审核按钮
    checkBtn (id) {
      this.id = id
      this.dialogChk = true
    },
    // 点击题目审核确认按钮
    async countersignBtn () {
      if (this.chkObj.chkRemarks.trim() === '') {
        this.chkObj.chkRemarks = ''
        return this.$message.warning('请输入审核意见!')
      }
      console.log(this.id)
      console.log(this.chkObj)
      const res = await choiceCheck({ id: this.id, ...this.chkObj })
      console.log(res, 1111)
      this.dialogChk = false
      // 调用获取精选题库列表
      this.choicenessList()
    },
    // 点击上架下架
    async putawaySold (row) {
      let publishState = row.publishState
      if (publishState === 1) {
        publishState = 0
      } else {
        publishState = 1
      }
      this.$confirm(`您确认${publishState === 1 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const res = await choicePublish({ id: row.id, publishState: publishState })
        // console.log(res)
        if (res.status !== 200) return this.$message.error('上架失败!')
        this.$message.success(`${publishState === 1 ? '上架' : '下架'}成功!`)
        // 调用获取基础题库列表
        this.choicenessList()
      }).catch(e => e)
    }

  }

}
</script>

<style scoped lang='scss'>
.dialog-footer{
      display: flex;
      justify-content: flex-end;

    }
.container{
  margin: 10px;
}
.el-link{
  margin-left: 5px;
}
.chkinput{
  margin-top: 15px;
}
</style>
